<script setup>
import { userFollowService } from '@/api/follow';
import { videoCommentService, videoFavoriteService, videoGetDirectCommentService, videoGetReplyCommentService, videoLikeService, videoUnFavoriteService, videoUnLikeService } from '@/api/video';
import { useUserStore } from '@/stores';
import { throttle } from '@/utils/lodash';
import { 
  VideoPlay, 
  VideoPause,
  FullScreen,
  UserFilled,
  Star,
  StarFilled,
  ChatDotRound,
  Close,
  ArrowRight,
  CirclePlusFilled
} from '@element-plus/icons-vue'
import { ref, reactive, onMounted, watch, computed } from 'vue';

const props = defineProps({
  src: String,
  videoId: Number,
  creatorId: Number,
  creatorName: { type: String, default: "路人甲" },
  creatorAvatar: String,
  description: { type: String, default: "视频描述文案..." },
  likes: { type: Number, default: 0 },
  comments: { type: Number, default: 0 },
  favorites: { type: Number, default: 0 },
  isFollowed: { type: Boolean, default: false},
  isLiked: { type: Boolean, default: false},
  isFavorited: { type: Boolean, default: false}
});

watch(
  () => props.src,
  (newSrc, oldSrc) => {    
    if (newSrc) {
      player.src = newSrc;
    }
  }
);

defineExpose({
  togglePlayPause,
  play,
  pause
});

const emit = defineEmits(['request-fullscreen']) // 请求全屏事件（退出全屏不会发送事件）

/* 引用stores */
const userStore = useUserStore();

const playerRef = ref(null);
let player = null;
const duration = ref(0);
const currentTime = ref(0);
const volume = ref(0.7);
const isMuted = ref(false);
const isFullscreen = ref(false);
const likeNumber = computed(() => props.likes);
const isLiked = computed(() => props.isLiked);
const favoriteNumber = computed(() => props.favorites);
const isFollowed = computed(() => props.isFollowed);
const isFavorited = computed(() => props.isFavorited);

const playerOptions = {
  loop: true,
  autoplay: false,
  controls: false,
  controlBar: false,
  preload: 'auto',
  sources: [{src: props.src, type: "video/mp4"}]
};

/* 播放与暂停 */
const state = ref(0); // 标识视频播放状态

function togglePlayPause() {
  (state.value ? pause : play)();
}

function play() {
  player.play();
  state.value = 1;
}

function pause() {
  player.pause();
  state.value = 0;
}

// 更新进度条
function updateProgress() {
  currentTime.value = player.currentTime;
}

// 跳转到指定时间
function seek(e) {
  const progressBar = e.currentTarget;
  const rect = progressBar.getBoundingClientRect();
  const percent = (e.clientX - rect.left) / rect.width;
  currentTime.value = percent * duration.value;
}

// 调整音量
function changeVolume(e) {
  player.volume = volume.value;
  isMuted.value = volume.value == 0;
}

// 切换静音
function toggleMute() {
  isMuted.value = !isMuted.value;
  player.muted = isMuted.value;
  if (!isMuted.value && volume.value == 0) {
    volume.value = 0.5;
    player.volume = volume.value;
  }
}

// 切换全屏
function toggleFullScreen() {
  if (!document.fullscreenElement) {
    emit('request-fullscreen');
    isFullscreen.value = true;
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
      isFullscreen.value = false;
    }
  }
}

// 格式化时间
function formatTime(seconds) {
  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
}

/* 点赞 */
let likeLoading = false;
async function handleLike(e) {
  e.stopPropagation();
  if (likeLoading) {
    return;
  }
  likeLoading = true;
  try {
    if (isLiked.value) {
      await videoUnLikeService(props.videoId);
      likeNumber.value--;
    } else {
      await videoLikeService(props.videoId);
      likeNumber.value++;
    }
    isLiked.value = !isLiked.value;
  } finally {
    likeLoading = false;
  }
}

/* 关注 */
function handleFollow(e) {
  e.stopPropagation();
  if (!isFollowed.value) {
    userFollowService(props.creatorId);
    isFollowed.value = true;
  }
}

/* 收藏 */
let favroiteLoading = false;
async function handleFavorite(e) {
  e.stopPropagation();
  if (favroiteLoading) {
    return;
  }
  favroiteLoading = true;
  try {
    if (isFavorited.value) {
      await videoUnFavoriteService(props.videoId);
      favoriteNumber.value--;
    } else {
      await videoFavoriteService(props.videoId);
      favoriteNumber.value++;
    }
    isFavorited.value = !isFavorited.value;
  } finally {
    favroiteLoading = false;
  }
}

/* 评论 */
const commentDrawerVisible = ref(false); // 控制评论抽屉显示
const newComment = ref(''); // 新评论内容
const commentList = ref([]); // 评论列表
let lastMinCommentId = null; // 上次分页查询的最小评论id
const replyingUserName = ref(null);
const replyingCommentReplyList = ref(null);
const replyingCommentId = ref(null);
const replyingContent = ref(null);

async function getComment() {
  const commentData = (await videoGetDirectCommentService(props.videoId, lastMinCommentId)).data.data;
  
  const processedComments = commentData.map(comment => {
    // 使用 reactive 将整个 comment 对象变为响应式
    const reactiveComment = reactive(comment);
    reactiveComment.replyList = [];
    reactiveComment.activeReplyId = null;
    
    return reactiveComment;
  });

  lastMinCommentId = processedComments[processedComments.length - 1].id;
  commentList.value.push(...processedComments);
}

const throttleGetComment = throttle(getComment, 1000);

async function getReplyComment(comment, commentId) {
  const replyData = (await videoGetReplyCommentService(commentId, comment['lastMaxReplyId'])).data.data;
  comment['lastMaxReplyId'] = replyData[replyData.length - 1].id;
  comment['replyList'].push(...replyData);
}

function handleComment(e) {
  e.stopPropagation();
  // 打开评论抽屉
  commentDrawerVisible.value = true;
  // 如果初次打开则直接加载数据（由于通过观察者实现无限滚动，这里无需手动初次加载数据）
  // if (commentList.value.length === 0) {
  //   getComment();
  // }
}

// 进行评论（或回复评论）
async function addComment() {
  if (newComment.value.trim()) {
    const receiverName = replyingUserName.value; // 存储避免等待请求响应期间值被修改导致出现问题
    const parentId = replyingCommentId.value;
    const replyList = replyingCommentReplyList.value;

    const commentId = (await videoCommentService(props.videoId, {parentId: replyingCommentId.value, content: newComment.value})).data.data;
    if (replyingCommentId.value == null) {
      commentList.value.unshift({
        id: commentId,
        parentId: parentId,
        name: userStore.userBasicInfo.name,
        avatarUrl: userStore.userBasicInfo.avatarUrl,
        content: newComment.value,
        updatedAt: '刚刚',
        likeCount: 0,
        replyList: []
      });
    } else {
      replyList.push({
        id: commentId,
        parentId: parentId,
        senderName: userStore.userBasicInfo.name,
        senderAvatar: userStore.userBasicInfo.avatarUrl,
        receiverName: receiverName,
        content: newComment.value,
        updatedAt: '刚刚',
        likeCount: 0
      })
    }
    newComment.value = '';
  }
}

// 点赞评论
function likeComment(comment) {
  comment.likes += 1;
}

// 点击接收者名字高亮显示对应评论（并移动到对应位置）
function onClickHighLightReply(comment, replyId) {  
  comment.activeReplyId = replyId;

  const targetElement = document.getElementById(replyId);
  if (targetElement) {
    targetElement.scrollIntoView({
      behavior: 'smooth', // 平滑滚动
      block: 'nearest'
    });
  }

  setTimeout(() => {
    if (comment.activeReplyId === replyId) {
      comment.activeReplyId = null;
    }
  }, 2000);
}

onMounted(() => {
  player = playerRef.value.$el.querySelector('video');
  
  player.addEventListener('timeupdate', updateProgress);
  player.addEventListener('loadedmetadata', () => {
    duration.value = player.duration;
  });
});
</script>

<template>
  <div class="video-container" @click="togglePlayPause">
    <video-player ref="playerRef" :options="playerOptions" @mounted="onPlayerMounted"></video-player>
    
    <!-- 右侧悬浮按钮 -->
    <div class="float-buttons" @click.stop>
      <div class="avatar-item">
        <el-avatar :src="creatorAvatar" fit="fill" style="width: 50px; height: 50px;" :icon="UserFilled" />
        <el-icon v-if="!isFollowed" @click="handleFollow" style="font-size: 18px; color: red; position: absolute; left: 50%; transform: translateX(-50%); bottom: -10px; cursor: pointer;"><CirclePlusFilled /></el-icon>
      </div>

      <div class="button-item" @click="handleLike">
        <el-icon :size="24">
          <LikeFilled v-if="isLiked"/>
          <Like v-else />
        </el-icon>
        <span>{{ likeNumber }}</span>
      </div>
      
      <div class="button-item" @click="handleComment">
        <el-icon :size="24"><ChatDotRound /></el-icon>
        <span>{{ comments }}</span>
      </div>
      
      <div class="button-item" @click="handleFavorite">
        <el-icon :size="24">
          <StarFilled v-if="isFavorited" style="color: #ffcd00"/>
          <Star v-else />
        </el-icon>
        <span>{{ favoriteNumber }}</span>
      </div>
    </div>
    
    <!-- 视频信息区域 -->
    <div class="video-info">
      <div class="author">@{{ creatorName }}</div>
      <div class="desc">{{ description }}</div>
    </div>
    
    <!-- 控制栏 -->
    <div class="control-bar" @click.stop="">
      <el-icon @click.stop="togglePlayPause">
        <VideoPause v-if="state"/>
        <VideoPlay v-else />
      </el-icon>
      
      <!-- 进度条 -->
      <div class="progress-container" @click.stop="seek">
        <div class="progress-bar" :style="{ width: `${(currentTime / duration) * 100}%` }"></div>
      </div>
      
      <span class="time">{{ formatTime(currentTime) }}/{{ formatTime(duration) }}</span>
      
      <!-- 音量控制 -->
      <el-icon @click.stop="toggleMute">
        <svg v-if="isMuted" t="1748853220173" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2206" width="200" height="200"><path d="M257.493333 322.4l215.573334-133.056c24.981333-15.413333 57.877333-7.914667 73.493333 16.746667 5.301333 8.373333 8.106667 18.048 8.106667 27.914666v555.989334C554.666667 819.093333 530.784 842.666667 501.333333 842.666667c-9.994667 0-19.786667-2.773333-28.266666-8L257.493333 701.6H160c-41.237333 0-74.666667-33.013333-74.666667-73.738667V396.138667c0-40.725333 33.429333-73.738667 74.666667-73.738667h97.493333z m26.133334 58.4a32.298667 32.298667 0 0 1-16.96 4.8H160c-5.888 0-10.666667 4.714667-10.666667 10.538667v231.733333c0 5.813333 4.778667 10.538667 10.666667 10.538667h106.666667c5.994667 0 11.872 1.664 16.96 4.8L490.666667 770.986667V253.013333L283.626667 380.8zM832.565333 518.4l86.474667 86.474667a30.570667 30.570667 0 1 1-43.232 43.242666L789.333333 561.653333l-86.474666 86.474667a30.570667 30.570667 0 1 1-43.232-43.242667l86.474666-86.474666-86.474666-86.474667a30.570667 30.570667 0 1 1 43.232-43.232L789.333333 475.178667l86.474667-86.474667a30.570667 30.570667 0 1 1 43.232 43.232l-86.474667 86.474667z" p-id="2207"></path></svg>
        <svg v-else t="1748853099422" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4644" width="200" height="200"><path d="M257.493333 322.4l215.573334-133.056c24.981333-15.413333 57.877333-7.914667 73.493333 16.746667 5.301333 8.373333 8.106667 18.048 8.106667 27.914666v555.989334C554.666667 819.093333 530.784 842.666667 501.333333 842.666667c-9.994667 0-19.786667-2.773333-28.266666-8L257.493333 701.6H160c-41.237333 0-74.666667-33.013333-74.666667-73.738667V396.138667c0-40.725333 33.429333-73.738667 74.666667-73.738667h97.493333z m26.133334 58.4a32.298667 32.298667 0 0 1-16.96 4.8H160c-5.888 0-10.666667 4.714667-10.666667 10.538667v231.733333c0 5.813333 4.778667 10.538667 10.666667 10.538667h106.666667c5.994667 0 11.872 1.664 16.96 4.8L490.666667 770.986667V253.013333L283.626667 380.8zM800.906667 829.653333a32.288 32.288 0 0 1-45.248-0.757333 31.317333 31.317333 0 0 1 0.768-44.693333c157.653333-150.464 157.653333-393.962667 0-544.426667a31.317333 31.317333 0 0 1-0.768-44.682667 32.288 32.288 0 0 1 45.248-0.757333c183.68 175.306667 183.68 460.010667 0 635.317333z m-106.901334-126.186666a32.288 32.288 0 0 1-45.248-1.216 31.328 31.328 0 0 1 1.237334-44.672c86.229333-80.608 86.229333-210.56 0-291.178667a31.328 31.328 0 0 1-1.237334-44.672 32.288 32.288 0 0 1 45.248-1.216c112.885333 105.546667 112.885333 277.418667 0 382.965333z" p-id="4645"></path></svg>
      </el-icon>
      <input 
        type="range" 
        class="volume-slider"
        v-model="volume"
        min="0"
        max="1"
        step="0.1"
        @click.stop
        @input="changeVolume"
      >
      
      <!-- 全屏按钮 -->
      <el-icon @click.stop="toggleFullScreen">
        <FullScreen />
      </el-icon>
    </div>
    
    <!-- 评论区抽屉 -->
    <el-drawer
      v-model="commentDrawerVisible"
      title="评论区"
      direction="rtl"
      size="40%"
      :destroy-on-close="true"
      :show-close="false"
      @close="commentDrawerVisible = false"
    >
      <template #header>
        <div class="drawer-header">
          <h3>评论区</h3>
          <el-button 
            type="danger" 
            text 
            circle 
            @click="commentDrawerVisible = false"
            class="close-btn"
          >
            <el-icon><Close /></el-icon>
          </el-button>
        </div>
      </template>
      
      <div class="comment-container" @wheel.stop>
        <div v-show="replyingUserName" style="display: flex; align-items: center; justify-content: space-between; padding: 5px 15px; margin-bottom: 5px; border: 1px dashed rgba(0, 123, 255, 0.3)">
          <div style="flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: black;">
            <span style="color: darkred; font-weight: bold;">回复</span>
            <span style="color: black; font-weight: bold;">{{ replyingUserName }}：</span>
            <span>{{ replyingContent }}</span>
          </div>

          <el-icon style="color: darkred; cursor: pointer;" @click="replyingUserName = null; replyingCommentId = null;  replyingContent = null"><Close /></el-icon>
        </div>
        <!-- 评论输入框 -->
        <div class="comment-input">
          <div class="input-wrapper">
            <el-input
              v-model="newComment"
              placeholder="写下你的评论..."
              clearable
              @keyup.enter="addComment"
            />
            <el-button 
              type="primary" 
              :disabled="!newComment.trim()" 
              @click="addComment"
              class="send-btn"
            >
              发送
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </div>
        </div>
        
        <!-- 评论列表 -->
        <div class="comment-list">
          <div v-for="comment in commentList" :key="comment.id" class="comment-item">
            <el-avatar :src="comment.avatarUrl" :size="36" fit="fill" />
            <div class="comment-content">
              <div class="comment-header">
                <span class="username">{{ comment.name }}</span>
              </div>
              <p class="comment-text">{{ comment.content }}</p>
              <div class="comment-footer">
                <span class="time">{{ comment.updatedAt }}</span>
                <el-button text class="reply-btn" @click="replyingUserName = comment.name; replyingCommentReplyList = comment.replyList; replyingCommentId = comment.id; replyingContent = comment.content">回复</el-button>
                <el-button 
                  text 
                  @click="likeComment(comment)"
                  class="like-btn"
                >
                  <el-icon><Like /></el-icon>
                  <span style="margin-left: 2px;">{{ comment.likeCount }}</span>
                </el-button>
              </div>

              <!-- 回复 -->
              <div :id="reply.id" class="reply-item" :class="{ 'is-active': comment.activeReplyId === reply.id }" v-for="reply in comment.replyList">
                <el-avatar :src="reply.senderAvatar" :size="26" fit="fill" />
                  <div class="reply-content">
                  <div class="reply-header">
                    <span class="sender-username">{{ reply.senderName }}</span>
                    <span style="color: #2c3e50;" v-if="reply.parentId != comment.id">&nbsp;->&nbsp;</span>
                    <span class="receiver-username" v-if="reply.parentId != comment.id" @click="onClickHighLightReply(comment, reply.parentId)">{{ reply.receiverName }}</span>
                  </div>
                  <p class="reply-text">{{ reply.content }}</p>
                  <div class="reply-footer">
                    <span class="time">{{ reply.updatedAt }}</span>
                    <el-button text class="reply-btn" @click="replyingUserName = reply.senderName; replyingCommentReplyList = comment.replyList; replyingCommentId = reply.id; replyingContent = reply.content">回复</el-button>
                    <el-button 
                      text 
                      @click="likeComment(reply)"
                      class="like-btn"
                    >
                      <el-icon><Like /></el-icon>
                      <span style="margin-left: 2px;">{{ reply.likeCount }}</span>
                    </el-button>
                  </div>
                </div>
              </div>
              <div class="load-reply-button" v-if="comment.replyCount > comment.replyList.length" @click="getReplyComment(comment, comment.id)">加载回复...</div>
            </div>
          </div>
          <observer @intersect="throttleGetComment"/>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<style lang="scss" scoped>
.video-container {
  display: flex;
  box-sizing: border-box;
  flex-shrink: 0;
  flex-direction: column;
  height: 100%;
  width: 100%;
  align-items: center;
  border: 1px solid rgb(176, 176, 176);
  border-radius: 5px 5px 5px 5px;
  user-select: none;
  position: relative;
  
  ::v-deep(.video-js) {
    width: 100%;
    flex: 1;
    background: rgb(213, 213, 218);
    border-radius: 5px 5px 0px 0px;
    
    ::v-deep(.vjs-tech) {
      width: auto;
      max-width: 100%;
      height: 100%;
    }
  }

  // 悬浮按钮容器
  .float-buttons {
    position: absolute;
    right: 15px;
    bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    z-index: 10;
    
    .avatar-item {
      position: relative;
      cursor: pointer;
      margin-bottom: 15px;
    }

    .button-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      
      .el-icon {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
        padding: 8px;
        transition: all 0.3s;
        
        &:hover {
          background: rgba(0, 0, 0, 0.5);
          transform: scale(1.1);
        }
      }
      
      span {
        color: white;
        font-size: 12px;
        margin-top: 5px;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
      }
    }
  }
  
  // 视频信息区域
  .video-info {
    position: absolute;
    bottom: 60px;
    left: 15px;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    max-width: 70%;
    z-index: 10;
    
    .author {
      font-weight: bold;
      font-size: 16px;
      margin-bottom: 5px;
    }
    
    .desc {
      font-size: 14px;
      line-height: 1.4;
    }
  }

  .control-bar {
    display: flex;
    box-sizing: border-box;
    padding: 0px 15px;
    align-items: center;
    height: 50px;
    width: 100%;
    font-size: 23px;
    background: radial-gradient(circle, rgb(47, 46, 46) 20%, rgb(76, 76, 76) 50%, rgb(47, 46, 46) 80%);
    border-radius: 0px 0px 5px 5px;
    gap: 12px;
    z-index: 10;
    
    .el-icon {
      cursor: pointer;
      font-size: 20px;
      color: #fff;
      flex-shrink: 0;
      
      &:hover {
        color: #409eff;
      }
    }
    
    .progress-container {
      flex: 1;
      height: 4px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 2px;
      cursor: pointer;
      position: relative;
      
      .progress-bar {
        position: absolute;
        height: 100%;
        background: #409eff;
        border-radius: 2px;
      }
    }
    
    .time {
      color: #fff;
      font-size: 12px;
      min-width: 80px;
      text-align: center;
    }
    
    .volume-slider {
      width: 80px;
      height: 4px;
      -webkit-appearance: none;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 2px;
      outline: none;
      
      &::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
      }
    }
  }
}

// 评论区抽屉样式
:deep(.el-overlay) {
  position: absolute;
}

:deep(.el-drawer) {
  background-color: white;
  .el-drawer__header {
    margin-bottom: 0;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    background: linear-gradient(135deg, #f5f7fa, #e4edf9);
    
    h3 {
      margin: 0;
      font-weight: 600;
      color: #2c3e50;
    }
  }
  
  .el-drawer__body {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: calc(100% - 55px);
  }
  
  .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    
    .close-btn {
      padding: 8px;
      font-size: 18px;
      color: #606266;
      transition: all 0.3s;
      
      &:hover {
        color: #409eff;
        transform: rotate(90deg);
      }
    }
  }
}

.comment-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  background-color: #f9fafc;
  
  .comment-input {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ebeef5;
    
    .input-wrapper {
      flex: 1;
      display: flex;
      gap: 10px;
      
      .el-input {
        flex: 1;
        border-radius: 20px;
        overflow: hidden;
        
        :deep(.el-input__wrapper) {
          border-radius: 20px;
          padding: 5px 15px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
      }
      
      .send-btn {
        border-radius: 20px;
        padding: 0 20px;
        font-weight: 500;
        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
        transition: all 0.3s;
        
        &:hover {
          transform: translateX(3px);
        }
        
        .el-icon {
          margin-left: 5px;
        }
      }
    }
  }
  
  .comment-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 8px;
    
    .comment-item {
      display: flex;
      gap: 12px;
      padding: 16px;
      margin-top: 12px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s, box-shadow 0.3s;
      
      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
      
      .comment-content {
        user-select: text;
        flex: 1;
        overflow-y: auto;
        
        .comment-header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;
          
          .username {
            font-weight: 600;
            color: #2c3e50;
          }
        }
        
        .comment-text {
          margin: 0 0 12px;
          line-height: 1.5;
          color: #606266;
        }
        
        .comment-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 16px;

          .time {
            font-size: 14px;
            color: #909399;
          }
          
          .like-btn, .reply-btn {
            padding: 4px 8px;
            font-size: 14px;
            color: #909399;
            transition: all 0.3s;
            
            &:hover {
              color: #409eff;
              background: rgba(64, 158, 255, 0.1);
              border-radius: 4px;
            }
          }
        }
      }
    }

    .reply-item {
      display: flex;
      gap: 12px;
      margin-top: 12px;
      background: white;

      &.is-active {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        background: rgba(255, 255, 255, 0.08);
      }
      
      .reply-content {
        user-select: text;
        flex: 1;
        font-size: 0.8em;
        
        .reply-header {
          display: flex;
          justify-content: flex-start;
          margin-bottom: 8px;
          
          .sender-username {
            font-weight: 600;
            color: #2c3e50;
          }

          .receiver-username {
            font-weight: 600;
            color: #2c3e50;
            cursor: pointer;
            
            &:hover {
              color: blue;
              text-decoration: underline;
            }
          }
        }
        
        .reply-text {
          margin: 0 0 12px;
          line-height: 1.2;
          color: #606266;
        }
        
        .reply-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 16px;

          .time {
            font-size: 12px;
            color: #909399;
          }
          
          .like-btn, .reply-btn {
            padding: 4px 8px;
            font-size: 12px;
            color: #909399;
            transition: all 0.3s;
            
            &:hover {
              color: #409eff;
              background: rgba(64, 158, 255, 0.1);
              border-radius: 4px;
            }
          }
        }
      }
    }
    .load-reply-button {
      font-size: 0.8em;
      text-align: center;
      color: darkgray;
      cursor: pointer;

      &:hover {
        color: black;
      }
    }
  }
}

.video-container ::-webkit-scrollbar {
  width: 6px;
}

.video-container ::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 3px;
}
</style>